/**
* @Description: WoShop商城
* @Author: Parker
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<view class="index_class homeBody">
			<u-navbar title-color="#fff" back-icon-color="#ffffff" :background="background" :is-back="false" :border-bottom="false">
				<view class="navbar-left" @click="$u.route('pagesC/search/searchArea')">
					<view class="message-box left-item">
						<u-icon name="map" size="50"></u-icon>
						<view class="left-item-view" v-if="location.lng && location.lat">{{location.name}}</view>
					</view>
				</view>

				<view class="slot-wrap">
					<view class="search-wrap">
						<u-search v-model="keyword" :placeholder="$t('请输入商品关键词')" :disabled="true" @click="$u.route('pagesC/search/searchAll')" :show-action="false" height="62" :action-style="{color: '#fff'}">
						</u-search>
					</view>
				</view>

				<view class="navbar-right">
					<view class="message-box right-item">
						<u-icon name="chat" size="50" @click="$u.route('/pagesB/message/message')"></u-icon>
						<u-badge v-if="messageBadgeShow" :count="soketNum" size="mini" :offset="[-15, -15]"></u-badge>
					</view>
					<!-- <view class="dot-box right-item">
						<u-icon name="coupon" size="48" @click="$u.route('/pagesB/coupon/getCoupon')"></u-icon>
						<u-badge v-if="couponBadgeShow" size="mini" bgColor="#fff" :is-dot="true" :offset="[-6, -6]"></u-badge>
					</view> -->
				</view>
			</u-navbar>
			<!-- <u-sticky :offset-top="offsetTop" h5-nav-height="44"> -->
			<u-tabs :style="{background: background.background}" :list="navList" class="nav-list" :current="0" @change="changeNav"
				:active-item-style="activeItemStyle" :show-bar="false" :name="'cate_name'" height="70" font-size="30"
				gutter="20" inactive-color="#ffffff" active-color="#ffffff"></u-tabs>
			<!-- </u-sticky> -->
			<view class="gap-wrap">
				<view class="gap"></view>
			</view>
		<view class="head-box">
			<!-- 轮播区 -->
			<view class="home-header">
				<view class="swipe-banner">
					<u-swiper :list="bannerList" name='ad_pic' height="280" bg-color="transparent" @click="bannerClick"
						border-radius="18"></u-swiper>
				</view>
			</view>

			<!-- 分类入口区 -->
			<view class="sortWrap">
				<view v-for="(item,index) in sortList" :key="index" class="box" @click="goLink(item)">
					<u-image :border-radius="300" :src="item.image_path"  height="90" width="90" shape="squire"></u-image>
					<p class="u-m-t-10 u-m-b-20 u-font-xs  name">{{item.menu_name}}</p>
				</view>
			</view>
		</view>
		<u-notice-bar mode="vertical" :list="list" v-if="false"></u-notice-bar>


		<!--店铺街-->
		<!-- <view class="shopMall" v-if="showMutipleShopper">
			<h3 class="tit">{{$t('店铺推荐')}}</h3>
			<view class="shopCardWrap">
				<view v-for="(item,index) in shopList" :key="index" @click="$u.route({url:'/pagesC/shop/storeDetails',params: {
					shop_id: item.id}})">
					<shopCard :info="item"></shopCard>
				</view>
			</view>
		</view> -->



		<!-- 商品列表 -->
		<view class="cardTab">
			<h3 class="cardTitTab" @click="goodsShopTypeFunction(1)">{{$t('猜你喜欢')}}
				<view class="cardTitbadgeTab">{{$t('精选好货')}}</view>
				<view class="cardBorder" v-if="goodsShopType == 1"></view>
			</h3>
			<h3 class="cardTitTab" @click="goodsShopTypeFunction(2)">{{$t('店铺街')}}
				<view class="cardTitbadgeTab">{{$t('精选店铺')}}</view>
				<view class="cardBorder"  v-if="goodsShopType == 2"></view>
			</h3>

		</view>
		<u-waterfall v-model="goodsList" class="u-m-10" ref="goodsWaterfall" v-if="goodsShopType==1">
			<template v-slot:left="{leftList}">
			    <view v-for="(item, index) in leftList" :key="index" class="goods-item">
					<view v-if="item.is_hot==1">
						<goodsCard :info="item" class="goodsCard"></goodsCard>
						<!-- 遮罩层 -->
						<view v-if="item.ban_start_time<=item.curTimeStamp && item.curTimeStamp <= item.ban_end_time ? true : false" class="mask-layer"  @click.stop="getnav('/pagesC/goods/goodsDetails?id='+item.id)"><text class="ban-font">
						商城价格更新中，暂停下单，距离开市还有{{ item.countdownOpening }}小时</text></view>
					</view>
					<view v-else>
						<homeCard :info="item" class="homeCard"></homeCard>
					</view>
			    </view>
			</template>
			<template v-slot:right="{rightList}">
				<view v-for="(item,index) in rightList" :key="index" class="goods-item">
					<view v-if="item.is_hot==1">
						<goodsCard :info="item" class="goodsCard"></goodsCard>
						<!-- 遮罩层 -->
						<view v-if="item.ban_start_time<=item.curTimeStamp && item.curTimeStamp <= item.ban_end_time ? true : false" class="mask-layer"  @click.stop="getnav('/pagesC/goods/goodsDetails?id='+item.id)"><text class="ban-font">
						商城价格更新中，暂停下单，距离开市还有{{ item.countdownOpening }}小时</text></view>
					</view>
					<view v-else>
						<homeCard :info="item" class="homeCard"></homeCard>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view class="the-content"  v-else>
		    <view class="shop-list" v-for="(time,index) in goodsShopList" :key="index">
		        <view class="the-title u-flex u-col-center u-row-between" @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:time.id}})">
		            <view class="u-flex">
		              <u-avatar :src="time.logo?time.logo : imgSTATICURL+'images/logo.png'"></u-avatar>
		                <view class="u-m-l-20">
		                    <view class="shopName">{{time.shop_name}}</view>
		                    <view>
		                      <view class="pf3" v-if="time.shop_desc!=null">{{time.shop_desc}}</view>
		                      <text class="pf" v-if="time.zonghe_fen==0">暂无评分</text>
		                      <text class="pf" v-if="time.zonghe_fen!=0">{{time.zonghe_fen}}分</text>
		                      <text class="pf4" v-if="time.single_freight!=0">配送 ￥{{time.single_freight}}</text>
		                      <text class="pf4" v-if="time.single_freight==0">免费配送</text>
		                      <text class="pf2" v-if="time.free_freight!=0">满{{time.free_freight}}免费配送</text>
		                    </view>
		                </view>
		            </view>

					<view class="location">
						<view class="location-distance">{{time.distance}}km</view>
						<u-tag :text="$t('进店逛逛')" mode="light" size="mini" shape="circle" type="warning" @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:time.id}})"/>
					</view>
		        </view>
		        <view class="itemsWrap u-flex">
		            <view class="items" v-for="(shopitem,index2) in time.goodres" :key="index2" @click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:shopitem.id}})">
		                <u-image width="200" height="200" border-radius="18" :src="shopitem.thumb_url" style="margin-bottom:8upx" />
		                <view class="u-line-1">{{shopitem.goods_name}}</view>
		                <view class="money">￥{{shopitem.zs_price}}</view>
		            </view>
					
		        </view>
		    </view>
		</view>
<!--		<popupContact></popupContact>-->
		<!-- 公司版权信息 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		<isLoginTips />
		<loadMore :loadingType="loadingType"></loadMore>

		<ad-mask ref="adMask"></ad-mask>
	</view>

</template>

<script>
	import shopWindow from "@/components/shopWindow" //橱窗组件
	import shopCard from '@/components/shopCard' //店铺组件
	import goodsCard from '@/components/goodsCard'
	import homeCard from '@/components/homeCard'
	import isLoginTips from "@/components/isLoginTips";
	import popupContact from "@/components/popup-contact";
	import adMask from "@/components/adMask";//广告弹框组件
	import Vue from "vue";
	import {mapGetters } from 'vuex';
	let page = 1
	let shopPage =1

	export default {

		data() {
			return {
				scrollTop: 0,
				sortList: [],
				isLogin: 0, //判断是否登陆
				swiper_height: '150px',
				headerPosition: 'fixed',
				speakerIconImg: '../../static/images/img/redian.png',
				swiperItems: [],
				goodsList: [],
				timeBanner: '',
				goodsinfo: {},
				loadingType: 0,
				seckillTime: {
					hour:0,
					coundown:0
				},
				xm: 0,
				isShow: [],
				cardInfo: {
					seckill: {},
					live: {},
					assemble: {},
					new_goods: {}
				},
				isScrollTop: false,
				shopList: [],
				homeBg: {},
				bgColor: '#fa3f3f',
				imgStaticUrl: '',
				bannerList: [],
				country: '',
				navList: [],
				// background :{'background': '#FF523C!important'},
				background :{},
				stickyTop: 175,
				navBarHeight: 88,
				activeItemStyle: {
					fontSize: '34rpx'
				},
				backIconName: 'grid-fill',
				keyword: '',
				offsetTop: 0,
				messageBadgeShow: true,
				couponBadgeShow: false,
				capsule: {}, // 胶囊图


				goodsShopType:1,
				goodsShopList:[], // 店铺列表
				imgSTATICURL: this.STATICURL,
				location:{
					cityCode:"",
					name:"",
					pinyin:"",
					lng:"",
					lat:"",
				},
				soketNum:0,
				leftList:[],
				rightList:[],
				showCoupon:false
				
			}
		},

		components: {
			shopWindow,
			shopCard,
			goodsCard,
			homeCard,
			isLoginTips,
			popupContact,
			adMask
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$t('哆嗯商城·好物分享'),
				path: '/pages/tabBar/home',
			}
		},
		computed:{
			...mapGetters([
				'showMutipleShopper'
			]),
		},

		onLoad() {
			this.getPosition();

			// 兼容微信小程序写法
			this.imgStaticUrl = this.STATICURL
			this.getBannerList()
			this.getCapsule()
			page = 1
			this.loadingType = 0
			this.goodsList = []
			this.getIndexShowcase()
			this.getRecommendShops()
			this.getGoodsList()
			this.gethomeInfo()
			this.getStyle()
			this.getMenuList()
			this.getIndexNavList()
			this.isInfoShow = false
			this.stickyTop = 1;
			//广告弹框
			this.showAdPopup();


			// #ifdef MP-WEIXIN
			//获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
			let custom = wx.getMenuButtonBoundingClientRect()
			//导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
			// this.stickyTop = custom.bottom + custom.top - uni.getSystemInfoSync().statusBarHeight
			// #endif

		},

		onShow() {
			if (uni.getStorageSync('token')) {
				this.$store.dispatch('contentnum')
			} else {
				this.isLogin = 0
			}
			this.setOffestTop();
			this.location = uni.getStorageSync("location");
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			if (e.scrollTop > 10) {
				this.isScrollTop = true
			} else {
				this.isScrollTop = false
			}

		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '哆嗯商城',
				path: '/pages/tabBar/Home'
			}
		},

    //下拉刷新
    onPullDownRefresh(){
      this.getBannerList()
      this.getCapsule()
      this.getIndexShowcase()
      this.getRecommendShops()
	  this.$refs.goodsWaterfall.clear();
      // this.getGoodsList()
      // this.gethomeInfo()
	  this.timeuptime();
      this.getMenuList()
      this.getIndexNavList()
      uni.stopPullDownRefresh()
    },

		methods: {

			//获取经纬度
			getPosition(){
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					geocode:true,//设置该参数为true可直接获取经纬度及城市信息
					success: function (res) {
						if(typeof(res.address) != "undefined"){
							let location = {
								cityCode:res.address.cityCode,
								name:res.address.city,
								pinyin:"",
								lng:res.longitude,
								lat:res.latitude,
							}
							uni.setStorageSync('location', location)
							that.location = uni.getStorageSync("location");
						}else{
							that.$http.geocodeRegeo({lng:res.longitude,lat:res.latitude}).then(res => {
								if(res.status == 200){
									let location = res.data
									uni.setStorageSync('location', location)
									that.location = uni.getStorageSync("location");
								}
							})
						}
				
					},
					fail: function () {
						let location = {
							cityCode:"",
							name:"全国",
							pinyin:"",
							lng:"",
							lat:"",
						}
						uni.setStorageSync('location', location)
					}
				});
			},

			// 适配吸顶tab高度
			setOffestTop() {
				// #ifndef H5
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) // px转rpx
				// #endif

			},
			changeNav(index) {
				let id = this.navList[index].id
				this.$u.route('/pagesC/goods/categoryGoods', {
					id: id
				});
			},
			getBannerList() {
				const data = {
					tag: 'mobile_index_banner'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.bannerList = res.data
					}
				})
			},
			bannerClick(index){
				let ad = this.bannerList[index];
				if(ad.ad_url != ''){
					this.$u.route({url:ad.ad_url,type:ad.ad_url_type})
				}
			},
			getCapsule() {
				const data = {
					tag: 'mobile_index_capsule'
				}
				this.$http.getAdByTag(data).then(res => {
					if(res.status == 200){
						this.capsule = res.data[0]
					}
				})
			},
			capsuleClick(){
				if(this.capsule.ad_url != ''){
					this.$u.route({url:this.capsule.ad_url,type:this.capsule.ad_url_type})
				}
			},
			getIndexNavList() {
				this.$http.getIndexNavList().then(res => {
					if (res.status === 200) {
						this.navList = res.data
					}
				})
			},
			getMenuList() {
				this.$http.getMenuList().then(res => {
					if(res.status===200){
						const {data:{menu_list=[]}} = res
						menu_list.map((res,i)=>{
							if(res.id===8 && !this.showMutipleShopper){
								return
							}
							return res
						})
						this.sortList = menu_list
					}
				})
			},
			signin() {
				if (uni.getStorageSync('token')) {
					this.getnav('/pagesB/my/signin')
				} else {
					this.$navigateTo('/pagesB/login/login')
				}
			},
			 async goLink(item) {
				if(item.menu_url.includes("/pagesC/channel/wxChannel")){
					const finderName = "sphQtbiN7AHDfVc";//视频号ID
					const skipMode = item.menu_url.slice(-1);
					if(skipMode == "0"){//内部跳转
						const feedId = await this.getChannel(finderName);
						this.$u.route({
							url: "/pagesC/channel/wxChannel",
							type: item.menu_url_type,
							params:{finderUserName:finderName,feedId:feedId}
						})
					}else{//外部跳转
						this.openChannel(finderName);
					}
				}else if(item.menu_url.includes("#小程序")){
					this.navMiniProgram(item.menu_url);
				}else{
					this.$u.route({
						url: item.menu_url,
						type: item.menu_url_type
					})
				}
			},
			async getChannel(finderUserName) {
			  return new Promise((resolve, reject) => {
				wx.getChannelsLiveInfo({
				  finderUserName: finderUserName,
				  success(res) {
					this.feedId = res.feedId;
					resolve(res.feedId);
				  },
				  fail(res) {
					console.log("视频号信息获取失败", res);
					reject(res);
				  }
				});
			  });
			},
			openChannel(finderUserName) {
				wx.openChannelsLive({
				  finderUserName: finderUserName,
				  success(res) {
				  },
				  fail(res) {
					console.log("视频号跳转失败", res);
				  }
				});
			 },
			 navMiniProgram(finderName) {
				wx.navigateToMiniProgram({
					shortLink: finderName,
					envVersion: 'release', 
					success(res) {
					  console.log("跳转小程序成功！",res);
					} 
				})
			 },
			 
			timeuptime() {
				page = 1
				this.loadingType = 0
				this.goodsList = []
				this.getGoodsList()
				this.gethomeInfo()
				this.getStyle()
			},
			getIndexShowcase() {
				this.$http.getIndexShowcase().then(res => {
					this.$nextTick(() => {
						this.cardInfo = res.data
					})
				})
			},
			getRecommendShops() {
				this.$http.getRecommendShops().then(res => {
					this.shopList = res.data

				})
			},
			getGoodsList() {
				this.$http.getGoodsList({
					page: page
				}).then(res => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2
							return false
						}
						
						let processedGoodsList = res.data.map(item => ({
						                ...item,
										curTimeStamp: Math.floor(Date.now() / 1000),
						                countdownOpening: Math.ceil((item.ban_end_time-Math.floor(Date.now()/1000))/3600)
						            }));
						this.goodsList = [...this.goodsList, ...processedGoodsList]
						console.log("商品列表");
						console.log(this.goodsList);

						this.loadingType = 0;
						
					}
				})
			},

			gethomeInfo() {
				this.$http.gethomeInfo().then(res => {
					if (res.status == 200) {
						this.soketNum = res.data.soket_num
						const date = new Date(Number(res.data.hdinfos.hdtime) * 1000)
						this.seckillTime.hour = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
						this.seckillTime.countdown = Number(res.data.hdinfos.end_time) - Number(res.data.hdinfos.dqtime)
					}
				})
			},
			
			getStyle() {
				this.$http.getStyle().then(res => {
					if (res.status == 200) {
						
						this.background = res.data.home_nav_style;
						
						console.log('this.background=====', this.background)
					}
				})
			},

			getTab(src) {
				uni.switchTab({
					url: src
				})
			},

			getsing() {
				if (!uni.getStorageSync('token')) {
					this.getnav('/pagesB/login/login?')
				} else {
					this.getnav('/pagesB/personalSon')
				}
			},

			goodsShopTypeFunction(goodsShopType){
				this.goodsShopType = goodsShopType
				if(goodsShopType == 1){
					page=1
					// this.goodsList = []
					this.$refs.goodsWaterfall.clear();
					this.getGoodsList()
				}else{
					shopPage=1
					this.goodsShopList = []
					this.getShopList();
				}
			},

			getShopList() {
			    this.$http.getShopList({
			        page: shopPage,
					longitude:this.location.lng,
					latitude:this.location.lat
			    }).then(res => {
					if (res.status == 200) {
						if (res.data.length == 0) {
							this.loadingType = 2
							return false
						}
						this.goodsShopList = [...this.goodsShopList, ...res.data.data]
						this.loadingType = 0
					}
			    })
			},
			
			async showAdPopup() {
				const data = await this.getAdHomeData();
				const isOpen = await data.data.is_open_home_pic;
				if(isOpen == 0){
					return;
				}
				const timeInterval = await data.data.pop_interval;
				const popTime = uni.getStorageSync("popUp-time");
				if (!popTime || new Date().getTime() - popTime > Number(timeInterval)*3600*1000) {
					uni.setStorageSync("popUp-time", new Date().getTime());
					this.showCoupon = true;
				}else{
					this.showCoupon = false;
				}

				if(isOpen == 1 && this.showCoupon){
					const mask = this.$refs['adMask']
					mask.shareImg = await data.data.home_ad_pic; //广告图片
					mask.shareModel = true //分享弹窗打开
					this.closeCouponNew();
					// #ifdef MP-WEIXIN
					return false;
					// #endif
				}

			},
			// 关闭弹框
			closeCouponNew(){
				this.showCoupon = false;
				uni.setStorageSync("popUp-time", new Date().getTime());
			},
			// 获取广告数据
			getAdHomeData() {
				return new Promise((resolve, reject) => {
					this.$http.getAdHomeData().then(res => {
						if (res.status === 200) {
							resolve(res.data)
						} else {
							reject(res)
						}
					})
			
				})
			}

		},


		onReachBottom() {
			if (this.loadingType == 1 || this.loadingType == 2) {
				return false
			}
			this.loadingType = 1
			page++
			shopPage++
			if(this.goodsShopType == 1){
				this.getGoodsList()
			}else{
				this.getShopList()
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.homeBody {
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center 170rpx;
	}

	.index_class /deep/ .u-tabs,
	.index_class /deep/.nav-list,
	.nav {
		// background-image: linear-gradient(45deg, #FA2E1B, #FF523C)!important;
			// background-color: transparent;
	}
	// /deep/.nav-list:first-child {
	// 		background-color: transparent;
	// 	}
	.nav-list{
		&:nth-child(1) {
			background: transparent!important;
		}
		background-color: #FA2E1B;
	}
	
	.nav-list :nth-child(1){
		background: transparent!important;
	}
	.gap-wrap{
		width: 750rpx;
		height: 25rpx;
		background-color: linear-gradient(45deg, #FA2E1B, #FF523C);
		.gap{
			background-color: #F9F9F9;
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
		}
	}

	.home-header {
		position: relative;
		width: 100%;

		.swipe-banner {
			width: 700rpx;
			margin: 0rpx 25rpx 30rpx;
		}

	}

	.sortWrap {
		padding: 0;
		display: flex;
		flex-wrap: wrap;

		.name {
			color: #242323;
			margin-top: 10rpx;
			font-size: 24rpx;
			font-weight: 400;
		}

		.box {
			flex-basis: 20%;
			flex-shrink: 0;
			text-align: center;
			@include flexbox($jc:center, $dr:column);
		}
	}

	.shopwindowWrap {
		display: flex;
		flex-wrap: wrap;
		border-radius: 16rpx;
		justify-content: space-between;
		padding: 0rpx;
		margin: 16rpx;
		overflow: hidden;
		background-color: #ffffff;
	}

	.shopWindow {
		width: 50% !important;
	}

	.bu_class {
		margin-top: 25rpx;
		padding: 0 10rpx;
	}

	.shopMall {
		background: #fff;
		padding: 20rpx;
		margin: 15rpx;
		border-radius: 12rpx;

		.shopCardWrap {
			margin-top: 8rpx;
			display: flex;
			overflow-x: auto;
		}

		.tit {
			color: #444;
		}
	}

	.seckillShopWindow {
		border-radius: 16rpx 0 0 0;
		overflow: hidden;

		/deep/.u-image__image {
			width: 80% !important;
		}
	}
	.newShopWindow {
		border-radius: 16rpx 0 0 0;
		overflow: hidden;
	}

	.assembleShopWindow {
		border-radius: 0 16rpx 0 0;
		overflow: hidden;
	}

	.homeActivity {
		padding: 20rpx 6rpx;
	}

	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}

	.search-wrap {
		margin: 0 20rpx;
		flex: 1;
	}

	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.left-item {
		margin-left:12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
		line-height:88rpx;
	}
	.left-item-view{
		width:100rpx;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.seckill-badge {
		color: #fff;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 32rpx;
		border-radius: 6rpx;
		padding: 2rpx;
		border-top-right-radius: 0rpx;
		border-bottom-right-radius: 0rpx;
	}
	.seckill-badge-countdown{
		background-color: rgba(249,161,161,0.2);
		color: #fff;
		font-size: 24rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 32rpx;
		border-radius: 6rpx;
		padding: 2rpx;
		border-top-left-radius: 0rpx;
		border-bottom-left-radius: 0rpx;

	}

	/deep/.u-countdown .u-countdown-colon{
		padding: 0;
	}
	/deep/.u-countdown .u-countdown-item{
		padding: 0;
	}

	.seckill-slot-wrap{
		display: flex;
	}



	.shop-search {
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    right: 20upx;
	    height: 60upx;
	    width: 620upx;
	    background-color: #EEEFEF;
	    border-radius: 30upx;
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    .iconfont {
	        height: 60upx;
	        line-height: 60upx;
	        width: 60upx;
	        text-align: center;
	        color: #999;
	    }
	    .bus-tap {
	        height: 60upx;
	        line-height: 60upx;
	        width: 100upx;
	        text-align: center;
	        color: #333333;
	    }
	    input {
	        flex: 1;
	        color: #999;
	        text-align: left;
	    }
	}
	.itemsWrap{
	  margin-top: 20upx;
	  overflow-x: scroll;
	  // display: flex;
	  // white-space: nowrap;
	  
	  .items{
		  width:33%;
		  margin-right: 10px;
		  scroll-snap-align: center;
		  text-overflow: ellipsis;
	  }
	  
	}
	
	.shopName{
	  font-size: 30upx;
	}
	.shop-list{
	  background-color: #fff;
	  margin: 15upx 20upx ;
	  border-radius: 10px;
	  padding: 25upx 20upx;
	}
	.location{
		text-align:right;
	}
	.location-distance{
		height:60rpx;
	}
// 遮罩样式
	.mask-layer {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 98%;
	  height: 98%;
	  background-color: rgba(0, 0, 0, 0.3); 
	  z-index: 1; 
	  display: flex;
	  justify-content: center;
	  align-items: center; 
	  border-radius: 10px;
	}
	
	.goods-item {
	    position: relative; 
	}
	.ban-font {
	  color: #ffffff; 
	  font-weight: bold; 
	  font-size: 18px; 
	  line-height: 24px; 
	  text-align: center; 
	}
	
	.homeCard {
	    position: relative; 
	    z-index: 0;
	}
	
	.pf {
		color: #df9500; 
		font-size: 13px;
	}
	.pf2 {
		margin-left: 10px;
		padding: 1px 1px;
		border: 1px solid #fa3f3f;
		border-radius: 4px;
		color: #fa3f3f;
		font-size: 10px;
		background-color: #fff;
		box-sizing: border-box;
	}
	.pf3 {
		color: #858696;
		font-size: 12px;
		white-space: nowrap; 
		display: block; 
		text-overflow: ellipsis;
		overflow: hidden; 
		max-width: 200px; 
	}
	.pf4 {
		color: #858696;
		font-size: 10px;
		margin-left: 10px;
	}
</style>
